import React from 'react';
import { routerShape } from 'react-router';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Modal } from 'antd';
import classnames from 'classnames';
import { WeaTools, WeaLocaleProvider } from 'ecCom';

import WeaMenu from '../../../../pc4public/portal/wea-menu/async';
import E9LeftMenuTop4Email from './E9LeftMenuTop4Email';

const { callApi } = WeaTools;
const { getLabel } = WeaLocaleProvider;
const { confirm } = Modal;

@inject('emailMenuStore', 'emailOpsStore')
@observer
class MenuWithLayout extends React.Component {
  static displayName = 'MenuWithLayout';
  static defaultProps = {
    prefixCls: 'wea-email-menu',
  }
  static contextTypes = {
    router: routerShape,
  };

  componentDidMount() {
    const { emailMenuStore: { getMenu, setSelectedKey }, location } = this.props;
    const themeInfo = WeaTools.ls.getJSONObj('theme-themeInfo');
    // 不是主题默认布局 或者单页打开页面的 情况下走请求
    const rule = window.isDev ? true : (themeInfo && themeInfo.themeLayoutType != 1 || window.location.href.indexOf('/spa/email/') > 0);
    if (rule) {
      getMenu('', true);
    }
    setSelectedKey(location);
  }

  componentDidUpdate(preProps) {
    const { location: l } = preProps;
    const { location, emailMenuStore: { hasMenu, setSelectedKey } } = this.props;
    hasMenu && location.pathname !== l.pathname && setSelectedKey(location);
  }

  onMenuSelect = (key, item, type) => {
    const { router } = this.context;
    const { emailMenuStore: { setState }, emailOpsStore: { emailSize: { remainspace } } } = this.props;
    if (item.id === '536-53611' || item.id === '536-53610') {
        // 我的文件夹、我的标签菜单 不跳转路由,只title跳转路由
        if (type === 1) {
          router.push(`main${item.titleUrl}`);
        }
    } else if (item.id === '536-53602' || item.id.startsWith('53602-53602')) {
      // 接收操作
      if (parseFloat(remainspace) <= parseFloat(0)) {
        Modal.warning({
          title: getLabel(520212, '接收失败'),
          content: getLabel(520211, '个人可用空间已满，请删除部分邮件后再进行接收'),
        });
      } else {
        router.push(`main${item.mobxrouteurl}`);
      }
    } else {
      type !== 1
      ? router.push(`main${item.mobxrouteurl}`)
      : item.id === '536-53606' // 清空垃圾箱
      ? confirm({
        title: getLabel(15172, '系统提示'),
        content: getLabel(384163, '确定要清空该文件夹下的邮件吗？'),
        okText: getLabel(826, '确定'),
        onOk: () => {
          callApi('/api/email/setting/operateUserMailFolder', 'POST', {
            operation: 'clear',
            folderId: '-4',
          }, 'text').then(() => {
            router.push(`main${item.mobxrouteurl}`);
          });
        },
      })
      : router.push(`main${item.titleUrl}`);
    }
    setState({ selectedKey: key });
  }

  render() {
    const { emailMenuStore: { hasMenu, datas, selectedKey },

      prefixCls, children } = this.props;

    const menuTopDatas = toJS(datas);
    const menuDatas = menuTopDatas.slice(2);
    const theme = window.weaPortalTheme;
    const colorType = theme && toJS(theme.store.portalThemeStore).themeInfo.themeColorType || '1';
    const cls = classnames({
      [prefixCls]: true,
      [`e9theme-color-${colorType}`]: hasMenu,
      [`${prefixCls}-show`]: hasMenu,
    });
    const clsL = classnames({
      [`${prefixCls}-left`]: true,
      'e9aside-container': hasMenu,
      [`${prefixCls}-left-show`]: hasMenu,
    });

    return (
      <div className={cls}>
        <div className={clsL}>
          <WeaMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaMenu@we4i37`}
            mode="inline"
            inlineWidth={197}
            verticalWidth={61}
            addonBefore={
              menuDatas.length > 2
              ? <E9LeftMenuTop4Email ecId={`${this && this.props && this.props.ecId || ''}_E9LeftMenuTop4Email@10arjg`} emailMenu={menuTopDatas} onSelect={this.onMenuSelect} />
              : null
            }
            addonBeforeHeight={48}
            datas={menuDatas}
            defaultSelectedKey={selectedKey}
            onSelect={this.onMenuSelect}
          />
        </div>
        <div className={`${prefixCls}-right`}>
          {children}
        </div>
      </div>
    );
  }
}
export default MenuWithLayout;
